<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    body{
        margin:0;
        padding:0;
    }
    .grid{
        margin-left:20px;
        margin-top:20px;
        margin-right: 20px;
        margin-bottom: 20px;
    }
    </style>
    <link rel="stylesheet" type="text/css" href="css/treeGrid.css">
</head>
<body>
    <div class="grid">
        <h2>TreeGrid</h2><h4>write by wuweiwei</h4>
        <input id="text" type="text" value="文学"/><input type="checkbox" id="isFuzzy">是否模糊查找
        <button id="btn_search">搜索</button>
        <button id="btn_addNext">同级加载</button>
        <button id="btn_addCell">添加列</button>
    </div>
    <div id="grid" class="grid"></div>
    <hr>
    <div id="grid2" class="grid"></div>    
</body>
</html>
<script type="text/javascript" src="js/jquery.3.3.1.min.js"></script>
<script type="text/javascript" src="js/treeGrid.js"></script>
<script type="text/javascript">
/*
write by wuweiwei
www.github.com/flybirdsoft
www.flybirdsoft.com/wui
 */

$(function(){
    var data = [
        {
            mulu:"自然",
            bookname:"JavaScript",
            cn:"1区/1架",
            en:"first zone/second frame",
            date:"2011-11-1"
        },
        {
            mulu:"自然",
            bookname:".net",
            cn:"1区/2架",
            en:"first zone/second frame",
            date:"2011-11-2"
        },
        {
            mulu:"自然",
            bookname:"java",
            cn:"2区/1架",
            en:"second zone/first frame",
            date:"2011-11-3"
        },
        {
            mulu:"自然",
            bookname:"node",
            cn:"2区/2架",
            en:"scond zone/second frame",
            date:"2011-11-4"
        }
    ];

    var natural = [
        {
            mulu:"自然",
            bookname:"英语",
            cn:"3区/3架",
            en:"thrid zone/third frame",
            date:"2011-11-4"
        },
        {
            mulu:"自然",
            bookname:"法语",
            cn:"3区/2架",
            en:"third zone/second frame",
            date:"2011-11-4"
        }
    ];

    var treegrid = new TreeGrid({
        container:document.getElementById("grid"),
        //columns :["col1","col2","col3"],
        columns:[
            {
                field : "mulu",
                title : "目录/类别",
            },
            {
                field : "bookname",
                title : "目录名/书名",
                formatter:function(options){
                },
                width: "400px"
            },
            {
                field : "date",
                title : "日期",
                width : "200px"
            }
        ],
        useIcon:true,
        data:data,
        width:"100%",
        onAjaxLoad : function(json){
            this.asyncLoadData(natural);
        }
    });

    /*

    功能：本地表格查找数据,找到后设置tr样式
    */
    $("#btn_search").on("click",function(){
        treegrid.localSearch({
            field : "col1",
            value : $("#text").val(),
            isFuzzy : $("#isFuzzy")[0].checked,
            css : {/*设置被找到元素的样式*/
                "background-color":"#dd0",
                "color":"#F00"
            }
        });   
    });

    $("#btn_addNext").on("click",function(){
        treegrid.asyncLoadNextData(natural);  
    });

    $("#btn_addCell").on("click",function(){
        treegrid.addCell({
            title:"新列",
            text :"",
            field:""
        });  
    });

});/*init*/



</script>
